<template>
  <div class="card4">
    <div class="card4-text">
      <div id="card3-left-text2-container">
        <span class="vertical-line3"></span>
        <p id="card4-text1">{{ $t('card4.text1') }}</p>
      </div>
      <div id="card3-left-text2-container">
        <span class="vertical-line2"></span>
        <p id="card4-text2">{{ $t('card4.text2') }}</p>
      </div>
    </div>
    <div class="out">
      <div class="inner">
        <div class="bg"></div>
        <div class="img" v-for="(imgSrc, index) in imgSources" :key="index">
          <img :src="imgSrc" alt=""/>
        </div>
      </div>

      <!-- 控制按钮 -->
      <div class="control-box">
        <div class="arrow">
          <button class="left" style="margin-left: 30px">‹</button>
          <div class="caption">{{ captions[activeIndex] }}</div>
          <button class="right" style="margin-right: 30px">›</button>
        </div>
      </div>

      <!-- 进度点 -->
      <div class="progress-dots">
        <span class="dot" v-for="(dot, index) in captions" :key="index" :data-index="index"></span>
      </div>
    </div>
  </div>
</template>

<script>

import {useI18n} from "vue-i18n";
import {onMounted, watch} from "vue";

export default {
  name: 'MyCard4',
  data() {
    return {
      idArr: ["first", "second", "right", "left", "left", "left", "last"],
      imgSources: [
        require('@/assets/bases/jianqiao.png'),
        require('@/assets/bases/chuangkeyuan.png'),
        require('@/assets/bases/kejiyuan.png'),
        require('@/assets/bases/guigu.png'),
        require('@/assets/bases/guangdongyigu.png'),
        require('@/assets/bases/jingguangxietong.png'),
        require('@/assets/bases/shenzhen.png')
      ],
      activeIndex: 0
    };
  },
  computed: {
    captions() {
      return [
        this.$t('card4.captions[0]'),
        this.$t('card4.captions[1]'),
        this.$t('card4.captions[2]'),
        this.$t('card4.captions[3]'),
        this.$t('card4.captions[4]'),
        this.$t('card4.captions[5]'),
        this.$t('card4.captions[6]')
      ];
    }
  },
  mounted() {
    this.initialize();
    const left = document.querySelector(".left");
    const right = document.querySelector(".right");
    const dots = document.querySelectorAll(".dot");

    left.addEventListener("click", (event) => {
      event.stopPropagation();
      this.prev();
    });

    right.addEventListener("click", (event) => {
      event.stopPropagation();
      this.next();
    });

    dots.forEach(dot => {
      dot.addEventListener("click", (event) => {
        const index = parseInt(event.target.getAttribute("data-index"));
        this.goTo(index);
      });
    });
  },
  methods: {
    prev() {
      this.updateTransition();
      setTimeout(() => {
        this.idArr.push(this.idArr.shift());
        this.initialize();
        this.updateCaption();
      }, 100);
    },
    next() {
      this.updateTransition();
      setTimeout(() => {
        this.idArr.unshift(this.idArr.pop());
        this.initialize();
        this.updateCaption();
      }, 100);
    },
    goTo(index) {
      this.updateTransition();
      setTimeout(() => {
        while (this.idArr.indexOf("first") !== index) {
          this.idArr.push(this.idArr.shift());
        }
        this.initialize();
        this.updateCaption();
      }, 100);
    },
    initialize() {
      const img = document.querySelectorAll(".img");
      img.forEach((image, index) => {
        image.id = this.idArr[index];
      });
      this.updateDots();
    },
    updateTransition() {
      const img = document.querySelectorAll(".img");
      const caption = document.querySelector(".caption");
      img.forEach(image => image.classList.add('fade-out'));
      caption.classList.add('fade-out');
      setTimeout(() => {
        img.forEach(image => image.classList.remove('fade-out'));
        caption.classList.remove('fade-out');
      }, 100);
    },
    updateCaption() {
      this.activeIndex = this.idArr.indexOf("first");
      this.updateDots();
    },
    updateDots() {
      const dots = document.querySelectorAll(".dot");
      const activeIndex = this.activeIndex;
      dots.forEach((dot, index) => {
        dot.classList.toggle("active", index === activeIndex);
      });
    }
  },
  setup() {
    // 使用 useI18n 钩子获取当前语言
    const { locale } = useI18n();

    // 更新样式的函数，根据语言改变样式
    const updateStyles = (lang) => {
      if (lang === 'en') {
        // 如果语言是英文，调整样式
        document.querySelector('.vertical-line3').style.height = '1.8vw';
        document.querySelector('.vertical-line3').style.width = '0.6vw';
        document.querySelector('#card4-text1').style.fontSize = '2.9vw';
        document.querySelector('#card4-text2').style.fontSize = '1.4vw';
      } else {
        //如何删掉这段代码的话则会造成样式固定导致无法切换回来
        document.querySelector('.vertical-line3').style.height = '2.2vw';
        document.querySelector('.vertical-line3').style.width = '0.6vw';
        document.querySelector('#card4-text1').style.fontSize = '3vw';
        document.querySelector('#card4-text2').style.fontSize = '1.6vw';
      }
    };

    // 监听语言变化，当语言变化时更新样式
    watch(() => locale.value, (newLang) => {
      updateStyles(newLang);
    });

    // 组件挂载完成后，根据当前语言更新样式
    onMounted(() => {
      updateStyles(locale.value);
    });
  },
}
</script>


<style>
.card4 {
  width: 100%;
  height: 100%;
  background: url(@/assets/background4.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.card4-text {
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 50px;
  padding-left: 70px;
}

.vertical-line3 {
  width: 0.6vw;
  height: 2.2vw;
  background-color: #2E75C9;
  margin-right: 10px;
}

.vertical-line2 {
  width: 0.6vw;
  height: 0.6vw;
  background-color: black;
  margin-right: 10px;
}

#card4-text1 {
  font-size: 3vw;
  margin: 0;
  color: #2E75C9;
  font-family: "STSong", "华文中宋", serif;
}

#card4-text2 {
  font-size: 1.6vw;
  margin: 0;
  font-family: "STSong", "华文中宋", serif;
}


.progress-dots {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.6s ease;
}

.dot.active {
  background-color: rgb(155, 203, 251);
}

.out {
  width: 100%;
  height: 80%;
  position: relative;
  top: 41%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 100%;
  height: 65%;
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.bg {
  margin-top: 10vh;
  width: 100%;
  height: 32vh;
  position: absolute;
  z-index: 0;
}

.img {
  width: 43%;
  height: 100%;
  position: absolute;
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: scale(1.05); /* 鼠标悬停时放大模块 */
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 确保图片完全显示，不会被裁剪 */
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: scale(1.05); /* 鼠标悬停时放大模块 */
}

.control-box {
  width: 44%;
  height: 10%;
  text-align: left;
  font-size: 18px;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  color: black;
  padding: 10px;
  border-radius: 3%;
}

.caption {
  transition: opacity 0.6s ease;
  opacity: 1;
  text-align: center;
  font-size: 26px;
}

.caption.fade-in {
  opacity: 1;
}

.caption.fade-out {
  opacity: 0;
}

.arrow {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.arrow button {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  cursor: pointer;
  background: none;
  border: 2px solid #000000;
  border-radius: 50%;
  font-size: 32px;
  margin-left: 500px;
  margin-right: 500px;
  width: 50px;
  height: 50px;
  position: absolute;
  overflow: hidden;
}

.arrow button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  opacity: 0;
}

.arrow button:active::before {
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(0);
  transition: 0s;
}

#last {
  transform: translateX(-82%) scale(0.55);
  z-index: 9;
  opacity: 0.7;
}

#first {
  transform: translateX(0) scale(1);
  z-index: 99;
  opacity: 1;
}

#second {
  transform: translateX(82%) scale(0.55);
  z-index: 9;
  opacity: 0.7;
}

#left {
  transform: translateX(-240%);
  z-index: 1;
  opacity: 0;
}

#right {
  transform: translateX(240%);
  z-index: 1;
  opacity: 0;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.6s ease;
}

#card3-left-text2-container {
  display: flex;
  align-items: center;
  margin: 0;
}


</style>
